<template>
  <div class="rate-container" :class="{bg:showBg,none:showBg&&(!computeRate||computeRate===0)}">
    <svg-icon :size="size==='small'?12:14" class="rate-star" :class="{small:size==='small'}"
              :icon-class="rateIndex>=(computeRate||0)?(rateIndex===computeRate&&showHalf)?'half_star':'grey_star':'star'"
              v-for="(rate,rateIndex) in 5" :key="rateIndex"></svg-icon>
  </div>
</template>

<script>
export default {
  name: 'RateStar',
  props: {
    showBg: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'normal'
    },
    rate: {
      type: Number,
      default: 0
    }
  },
  computed: {
    computeRate () {
      if (this.rate) {
        return Math.floor(this.rate)
      } else {
        return 0
      }
    },
    showHalf () {
      return String(this.rate).indexOf('.') !== -1
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">

.rate-container {
  display: flex;

  .rate-star {
    margin-right: 3px;

    &.small {
      margin-right: 2px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &.bg {
    background: #FEF9F2;
    border-radius: 10px;
    padding: 3px 8px;
  }

  &.none {
    background: #FAFAFA;
  }
}
</style>
